<template>
  <el-dialog :visible="visible" :title="formData.id?'查看账单':'添加账单'" width="550px" @close="$emit('update:visible',false)">
    <el-row type="flex" justify="center">
      <el-form ref="formRef" size="medium" :model="formData" :rules="rules">
        <el-form-item :label="formData.id?'租户名称':'选择租户'" prop="enterpriseId">
          <p v-if="formData.id" style="width:320px;margin-top:-2px">{{ formData.enterpriseName }}</p>
          <el-select v-else v-model="formData.enterpriseId" placeholder="请选择租户" style="width:320px">
            <el-option v-for="item in list" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="buildingId" label="租赁楼宇">
          <span v-if="formData.id">{{ formData.buildingName }}</span>
          <el-select v-else v-model="formData.buildingId" placeholder="请选择租赁楼宇" style="width:320px" @change="onChange">
            <el-option v-for="item in builList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="time" label="续费周期">
          <span v-if="formData.id">{{ formData.startTime+'至'+formData.endTime }}</span>
          <el-date-picker
            v-else
            v-model="formData.time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:320px"
            value-format="yyyy-MM-dd"
            @change="onChange"
          />
        </el-form-item>
        <el-form-item label="支付金额" prop="paymentAmount">
          <span v-if="formData.id">{{ formData.paymentAmount }}</span>
          <el-input v-else v-model="formData.paymentAmount" disabled placeholder="请输入支付金额" style="width:320px" />
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
          <span v-if="formData.id">{{ formData.paymentMethodValue }}</span>
          <el-select v-else v-model="formData.paymentMethod" placeholder="请输入支付方式" style="width:320px">
            <el-option value="1" label="微信" />
            <el-option value="2" label="支付宝" />
            <el-option value="3" label="现金" />
          </el-select>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-form-item>
            <el-button @click="$emit('update:visible',false)">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
import { getListEtpAPI } from '@/api/enterprise'
import { getBuilListApi } from '@/api/building'
import { addCondoFeeAPI, examineListAPI, getMountAPI } from '@/api/condoFee'
// import { getMountAPI } from '@/api/condoFee'
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      // 租户数组
      list: [],
      // 租赁楼宇数组
      builList: [],
      formData: {
        id: null,
        time: '',
        enterpriseId: null,
        buildingId: null,
        startTime: '',
        endTime: '',
        paymentAmount: null,
        paymentMethod: null
      },
      rules: {
        enterpriseId: [
          { required: true, message: '请选择租户', trigger: 'blur' }
        ],
        buildingId: [
          { required: true, message: '请选择租赁楼宇', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择续费周期', trigger: 'blur' }
        ],
        paymentAmount: [
          { required: true, message: '请输入支付金额', trigger: 'blur' }
        ],
        paymentMethod: [
          { required: true, message: '请输入支付方式', trigger: 'blur' }
        ]
      }
    }
  },
  // 重置表单
  watch: {
    async visible(newVisible) {
      if (!newVisible) {
        await this.$refs.formRef.resetFields()
        // 重置后清空
        this.formData = {
          enterpriseId: null,
          buildingId: null,
          startTime: '',
          endTime: '',
          paymentAmount: null,
          paymentMethod: null
        }
      }
    }
  },
  async created() {
    // 获取租户
    const res = await getListEtpAPI(this.formData)
    const res1 = await getBuilListApi(this.formData)
    this.list = res.data.rows
    this.builList = res1.data.rows

    // 查看详情
    // this.Look()
  },
  methods: {
    // 判断楼宇和日期是否为空 全部选中，发送预算金额请求 拿到预算金额
    async onChange() {
      if (this.formData.buildingId && this.formData.time) {
        const res = await getMountAPI({ buildingId: this.formData.buildingId, startTime: this.formData.time[0], endTime: this.formData.time[1] })
        this.formData.paymentAmount = res.data
        this.formData.startTime = this.formData.time[0]
        this.formData.endTime = this.formData.time[1]
      }
    },
    async onSubmit() {
      // 提交表单校验
      await this.$refs.formRef.validate()
      // 判断是否是查看还是查看
      if (!this.formData.id) {
        // 发送添加请求
        await addCondoFeeAPI(this.formData)
        // console.log(res)
        this.$message.success('添加成功')
        // 提示用户 通知父组件刷新页面 关闭弹窗
        this.$emit('onSuccess')
      } else {
        this.$emit('update:visible', false)
      }

      this.$emit('update:visible', false)
    },
    // 发送查看详情请求方法
    async Look(id) {
      const res = await examineListAPI(id)
      // console.log(res)
      this.formData = res.data
      this.formData.time = [res.data.startTime, res.data.endTime]
    }
  }

}
</script>

<style>

</style>
